<!doctype html>
<html lang="en">
<head>
    @include('web.layout.head')
    <link rel="stylesheet" href="{{mix('/css/web/user/prove_release.css')}}">
</head>
<body>
@include('web.layout.header')
@include('web.layout.user_tab')
<div class="base_member_content">
    <div class="w1200">
        @include('web.layout.seller_nav')
        <div class="nav_right flr">
            <div class="issue_txt">
                <div style="overflow: hidden;">
                    <div class="title" style="width: 200px;float: left;line-height: normal;">发布商品</div>
                    <div class="steps" style="padding-top: 10px;">
                        <span class="xuanz">1.选择类目</span>
                        <span class="xuanzno">2.填写商品详情</span>
                        <span class="xuanzno">3.提交成功</span>
                    </div>
                </div>
                <div class="line"></div>
                <span class="tuijian">为您的产品信息选择合适的类目</span>（没有合适的类目，请联系400-016-6889）

                <div class="select-box">
                    <div class="wrap">
                        <ul class="first"><li val="1">视频监控</li><li val="2">防盗报警</li><li val="3">门禁对讲</li><li val="16">智能交通</li><li val="17">智能家居</li><li val="20">机房工程</li><li val="21">应急反恐</li><li val="23">安防通配</li><li val="25">会议广播</li></ul>
                        <ul class="second"></ul>
                        <ul class="third"></ul>
                    </div>
                </div>
                <form action="@if(0 == request('id',0))/seller/prove_release_sec @else /seller/edit_prove_release/{{request('id')}}@endif" method="get" id="frm-ctype">
                    <div class="selected_data">
                        <span>您当前选择的类目：</span>
                        <span class="select-res"></span>
                    </div>
                    <div class="btnn">
                        <a class="goto_next" href="javascript:;">下一步，填写信息详细</a>
                    </div>
                </form>
                <input type="hidden" id="data_json" value="" />
            </div>
        </div>
    </div>
</div>
@include('web.layout.footer')
</body>
<script type="text/javascript">
    $(function () {
        var height = document.body.clientHeight - 500;
        $(".issue_txt").css('height', 530 + 'px');

        var dataJson = JSON.parse($("#data_json").val());
        var l1 = 0, l2 = 0;
        var cname1, cname2, cname3;
        var cid1, cid2, cid3;
        $('ul', $('.select-box')).html('');
        fillData();

        $('span', $('.select-box')).on("click", function () {
            alert('请选择下级品类！');
        });

        $('.select-res').on('click', 'a', function () {
            $(this).parent().remove();
            $('.select-box').css({
                top: $('.select-res').offset().top + $('.select-res').outerHeight(true)
            });
        })

        $('ul.first', $('.select-box')).on('click', 'li', function () {
            $(this).addClass('selected').siblings().removeClass('selected');
            $('ul.third').html('');
            l1 = $(this).attr('val');
            fillData(l1);
            cname1 = $(this).text();
            cid1 = $(this).attr('val');
            $('.select-res').html(cname1 + ' > ');
        });
        $('ul.second', $('.select-box')).on('click', 'li', function () {
            $(this).addClass('selected').siblings().removeClass('selected');
            l2 = $(this).attr('val');
            fillData(l1, l2);
            cname2 = $(this).text();
            cid2 = $(this).attr('val');
            $('.select-res').html(cname1 + ' > ' + cname2 + ' > ');
        });
        $('ul.third', $('.select-box')).on('click', 'li', function () {
            $(this).addClass('selected').siblings().removeClass('selected');
            cname3 = $(this).text();
            cid3 = $(this).attr('val');
            $('.select-res').html(cname1 + ' > ' + cname2 + ' > ' + cname3 + '<input type="hidden" value="' + cid1 + ',' + cid2 + ',' + cid3 + '" name="categories" /><input type="hidden" value="' + cname1 + ',' + cname2 + ',' + cname3 + '" name="cname" />');
        });

        // 提交下一步
        $(".goto_next").click(function () {
            if ($(".select-box .third").find('.selected').length <= 0 || $("#frm-ctype").find('input[type="hidden"]').length <= 1) {
                layer.alert('请选择商品类目',{
                    icon: 2
                });
                // $.MsgBox.Alert('提示', '请选择商品类目');
                return false;
            }
            $("#frm-ctype").submit();
        });


        // 填充级联数据
        function fillData(l1, l2) {
            var temp_html = "";
            if (typeof(dataJson) != 'undefined' && arguments.length == 0) {
                $.each(dataJson, function (i, pro) {
                    temp_html += '<li val="' + pro.category_id + '">' + pro.name + '</li>';
                });
            } else if (typeof(dataJson[l1].child_list) != 'undefined' && arguments.length == 1) {
                $.each(dataJson[l1].child_list, function (i, pro) {
                    temp_html += '<li val="' + pro.category_id + '">' + pro.name + '</li>';
                });
            } else if (typeof(dataJson[l1].child_list[l2].child_list) != 'undefined' && arguments.length == 2) {
                $.each(dataJson[l1].child_list[l2].child_list, function (i, pro) {
                    temp_html += '<li val="' + pro.category_id + '">' + pro.name + '</li>';
                });
            }
            $('.select-box ul:eq(' + arguments.length + ')').html(temp_html);
        }

    })
</script>
</html>